<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录</title>
    <!-- 初始化 -->
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 公共css -->
    <link rel="stylesheet" href="./css/common.css">
     <!-- 引入自己css -->
     <link rel="stylesheet" href="./css/login.css">
     <!-- 引入自己js -->
     <script src="./js/login.js"></script>
</head>

<body>
    <!-- 头部 -->
    <div id="header">
        <!-- 版心 -->
        <div class="wrap clearfix headerBox">
            <!-- 头部logo -->
            <div class="headerLogo fl"></div>
            <!-- 左侧legou.cn -->
            <div class="headerText fl">legochina.cn</div>
            <!-- 右侧登录 -->
            <div class="headerLogin fr">
                <!-- span贴紧不能换行，不然字间距变大了 -->
                <span>欢迎光临</span>
                <span class="link-homepage ">乐购</span>
                <span>,请</span>
                <span class="link-login">登录/</span>
                <span class="link-regist ">注册</span>
            </div>
        </div>
    </div>
    <!-- 搜索栏和头部导航 -->
    <div class="wrap">
            <!-- 搜索栏 -->
            <div class="searchbox">
                <!-- 版心 -->
                <div class="wrap clearfix">
                    <!-- 购物车，我的订单 向右浮动所以靠右的内容放前面 -->
                    <div class="shopping-order fr clearfix">
                        <!-- 购物车 -->
                        <div class="shopping fl">
                            <!-- 购物车图标 -->
                            <span class="shopping-icon"></span>
                            <span>购物车</span>
                            <span>3</span>
                        </div>
                        <!-- 我的订单 -->
                        <div class="order fl">我的订单</div>
                    </div>
                    <!-- 搜索输入栏 -->
                    <div class="search fr">
                        <!-- 输入框 -->
                        <div class="s-ipt">
                            <input type="text" placeholder="创意文具" id="oldInp">
                        </div>
                        <!-- 搜索按钮 -->
                        <div class="s-btn"></div>
                    </div>

                </div>
            </div>
            <!-- 头部品类导航 -->
            <div class="top-nav">
                <ul>
                    <li class="nav-list fl">图书</li>
                    <li class="nav-list fl">电子书</li>
                    <li class="nav-list fl">原创文学</li>
                    <li class="nav-list fl">服装</li>
                    <li class="nav-list fl">户外运动</li>
                    <li class="nav-list fl">孕婴童</li>
                    <li class="nav-list fl">家居</li>
                    <li class="nav-list fl">创意文具</li>
                    <li class="nav-list fl">地方特色</li>
                    <li class="nav-list fl">海外购</li>
                    <li class="nav-list fl">电器城</li>
                </ul>
            </div>
    </div>
    <!-- 主体内容 -->
    <div id="main">
        主体内容
    </div>
    <!-- 页脚 -->
    <div id="footer " class="mat50 footer">
        <!-- 发货流程 -->
        <div class="step ">
            <div class="imgbox clearfix">
                <div class="step-img fl"></div>
                <div class="step-img fl"></div>
                <div class="step-img fl"></div>
                <div class="step-img fl"></div>
            </div>

        </div>
        <!-- 底部导航 -->
        <div class="bottom-nav">
            <ul class="clearfix">
                <li>
                    <p>购物指南</p>
                    <ul>
                        <li>购物流程</li>
                        <li>发票制度</li>
                        <li>账户管理</li>
                        <li>会员优惠</li>
                    </ul>
                </li>
                <li>
                    <p>支付方式 </p>
                    <ul>
                        <li>货到付款</li>
                        <li>网上支付</li>
                        <li>礼品卡支付</li>
                        <li>银行转帐</li>
                    </ul>
                </li>
                <li>
                    <p>购物指南</p>
                    <ul>
                        <li>购物流程</li>
                        <li>发票制度</li>
                        <li>账户管理</li>
                        <li>会员优惠</li>
                    </ul>
                </li>
                <li>
                    <p>购物指南</p>
                    <ul>
                        <li>购物流程</li>
                        <li>发票制度</li>
                        <li>账户管理</li>
                        <li>会员优惠</li>
                    </ul>
                </li>
                <li>
                    <p>商家服务</p>
                    <ul>
                        <li>商家中心</li>
                        <li>运营服务</li>
                        <li>加入尾品汇</li>
                    </ul>

                </li>
            </ul>
        </div>
        <!-- 公司简介 -->
        <div class="bottom-bottom">
            <div class="bot-bot-top">
                公司简介 &emsp; | &emsp; Investor Relations &emsp; | &emsp; 网站联盟&emsp; | &emsp;乐购招商&emsp; | &emsp; 机构销售 &emsp; | &emsp;手机乐购&emsp;
                | &emsp; 官方Blog &emsp; | &emsp;热词搜索
            </div>
            <div class="bot-bot-bot">
                Copyright (C) 乐购网 2004-2016, All Rights Reserved
            </div>
        </div>
        <!-- 固定图标 -->
        <div class="fix-icon"></div>
    </div>

</body>

</html>